<template>
	<view class="container">
	    <view class="top-main">
	        <view class="search">
	            <swiper class="search-pl">
	                <swiper-item>value</swiper-item>
	            </swiper>
	            <image src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/%E6%90%9C%E7%B4%A2.png"></image>
	        </view>
	        <swiper class="banner" nextMargin="22rpx" previousMargin="22rpx">
	            <swiper-item class="swiper-item">
	                <image  class="swiper-image"  mode="scaleToFill" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/banner-1.png"></image>
	            </swiper-item>
	        </swiper>
	    </view>
	    <view class="more-test-content">
	        <view class="more-test-tips">
	            <scroll-view class="scroll-view" >
	                <view class="tab-types">
	                    <view class="scroll-view-wrap">
	                        <view class="action">
	                            <text>热门测试</text>
	                        </view>
	                    </view>
	                </view>
	            </scroll-view>
	        </view>
	        
			<view class="product-list">
	            <view class="product-list data-v-1ec80114">
	                <block>
	                    <view class="product-items data-v-1ec80114" v-for="product in productList" :key="product.productId"  @click="beginTest(product.productId)">
	                        <view class="icon data-v-1ec80114">
	                            <image class="data-v-1ec80114" :src="product.productImg"></image>
	                        </view>
	                        <view class="detail data-v-1ec80114">
	                            <view class="product-title data-v-1ec80114">{{product.productTitle}}</view>
	                            <view class="product-desc data-v-1ec80114">{{product.productSubtitle}}</view>
	                            <view class="product-tags data-v-1ec80114">
	                                <image v-if="product.productStatus == 0" class="tags data-v-1ec80114" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/tag-hot.png"/>
	                                <image v-if="product.productStatus == 1" class="tags data-v-1ec80114" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/tag-new.png"/>
	                            </view>
	                            <button class="btn data-v-1ec80114">
	                                <image class="data-v-1ec80114" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/btn.png"></image>
	                            </button>
	                        </view>
	                    </view>
	                </block>
	              <!--  <view class="data-bottom data-v-1ec80114">没有更多产品了:-)</view>
	                <block>
	                    <view class="data-bottom data-v-1ec80114">
	                        <image class="_img data-v-1ec80114" src="https://ttmini.yizhiwechat.com/ytKnowledgePlanet/listindex/tag-hot.png"></image>加载中</view>
	                </block> -->
	            </view>
	        </view>
			
	    </view>
	</view>

</template>

<script>
	import { loadProductList } from '@/api/index.js';
	
	export default {
		data() {
			return {
				productList:[],
				finish:false,
				loading:false,
				title: 'Hello'
			}
		},
		onLoad() {
			this.loadProductList();
		},
		methods: {
		async loadProductList(){
		  let { data } = await loadProductList({});
		  if ( data.code === 200) {
			this.productList = data.data;
		  }
		},
		beginTest(productId){
			uni.navigateTo({
				url: '/pages/exam/index?productId='+productId
			});
		}
		}
	}
</script>

<style scoped>
.container {
    background-color: #fff;
}

.container .banner {
    margin: 0 0 30rpx;
    width: 750rpx;
    height: 320rpx;
}

.container .banner .swiper-item {
    width: 706rpx;
}

.container .banner .swiper-image {
    width: 690rpx;
    height: 320rpx;
    background: #430368;
    border-radius: 20rpx;
    margin: 0 auto;
}

.top-main {
    box-shadow: 0 4rpx 80rpx 0 rgba(51,51,51,.1);
    border-radius: 0 0 50rpx 50rpx;
    overflow: hidden;
}

.search {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: #f8f8f8;
    border-radius: 20rpx;
    width: 690rpx;
    margin: 24rpx auto;
    padding: 20rpx 30rpx;
}

.search .search-pl {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    height: 44rpx;
}

.search .search-pl swiper-item {
    color: grey;
    font-size: 32rpx;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.search image {
    -webkit-box-flex: 0;
    flex: 0 0 44rpx;
    width: 44rpx;
    height: 44rpx;
}

.recommends-list {
    width: 720rpx;
    margin: 0 auto 12rpx;
    flex-wrap: wrap;
}

.recommends-list,.recommends-list .recommends-item {
    display: flex;
}

.recommends-list .recommends-item {
    -webkit-box-flex: 0;
    flex: 0 0 25%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column;
    -webkit-box-align: center;
    align-items: center;
}

.recommends-list .recommends-item image {
    width: 146rpx;
    height: 146rpx;
    border-radius: 20rpx;
}

.recommends-list .recommends-item view {
    font-size: 30rpx;
    color: #333;
    line-height: 54rpx;
    width: 160rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.enshrine-btn {
    width: 488rpx;
    height: 64rpx;
    position: fixed;
    z-index: 1000;
}

.take-tiktok {
    top: 524rpx;
}

.more-test-tips {
    position: relative;
    border-bottom: 1px solid #f2f2f2;
}

.more-test-tips .scroll-view {
    width: 750rpx;
}

.more-test-tips .scroll-view .tab-types {
    height: 88rpx;
    display: flex;
}

.more-test-tips .scroll-view .tab-types .scroll-view-wrap {
    padding: 0 12px;
    height: 100%;
}

.more-test-tips .scroll-view .tab-types .scroll-view-wrap view {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.more-test-tips .scroll-view .tab-types .scroll-view-wrap image {
    width: 153rpx;
    height: 34rpx;
}

.more-test-tips .scroll-view .tab-types .scroll-view-wrap .action {
    height: 100%;
    font-size: 17px;
    color: #ff4242;
    position: relative;
}

.more-test-tips .scroll-view .tab-types .scroll-view-wrap .action::before {
    content: "";
    display: block;
    position: absolute;
    background: #ff4242;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 6rpx;
    border-radius: 3rpx;
}

.more-test-tips .fixTop {
    position: fixed;
    top: 0;
    z-index: 999;
    background: #f6f6f6;
    height: 56rpx;
    box-shadow: 0 0 1px rgba(0,0,0,.3);
}

.more-test-tips .more-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 50rpx;
    height: 50rpx;
    z-index: 22;
    background: #fff;
}
.product-list.data-v-1ec80114 {
    margin-top: 24rpx;
}

.product-list .product-items.data-v-1ec80114 {
    display: flex;
    margin-bottom: 12rpx;
    padding: 0 36rpx;
}

.product-list .product-items.unit.data-v-1ec80114 {
    margin-bottom: 30rpx;
    padding: 0 30rpx;
}

.product-list .product-items .unit-banner.data-v-1ec80114 {
    margin: 0!important;
}

.product-list .product-items .icon.data-v-1ec80114 {
    -webkit-box-flex: 0;
    flex: 0 0 192rpx;
}

.product-list .product-items .icon image.data-v-1ec80114 {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
}

.product-list .product-items .detail.data-v-1ec80114 {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}

.product-list .product-items .detail .product-title.data-v-1ec80114 {
    color: #404040;
    font-size: 30rpx;
    font-weight: bolder;
}

.product-list .product-items .detail .product-desc.data-v-1ec80114 {
    color: #999;
    font-size: 24rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 470rpx;
    line-height: 50rpx;
}

.product-list .product-items .detail .product-tags.data-v-1ec80114 {
    display: inline-grid;
    grid-template-columns: repeat(2,98rpx);
    grid-template-rows: repeat(2,48rpx);
    margin-top: 17rpx;
}

.product-list .product-items .detail .product-tags .tags.data-v-1ec80114 {
    width: 80rpx;
    height: 33rpx;
}

.product-list .product-items .detail .btn.data-v-1ec80114 {
    float: right;
    margin-top: 12rpx;
}

.product-list .product-items .detail .btn image.data-v-1ec80114 {
    width: 226rpx;
    height: 54rpx;
}

.data-bottom.data-v-1ec80114 {
    font-size: 26rpx;
    color: #333;
    text-align: center;
    padding: 24rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.data-bottom ._img.data-v-1ec80114 {
    width: 36rpx;
    height: 36rpx;
    animation: rotate 1.5s linear infinite;
}
</style>
